<template>
  <!--添加收货地址-->
  <view class="address-add-containter">
    <view class="add-container">
      <view class="panel">
        <view class="row_name">
          <view class="left_txt">发票类型：</view>
          <uni-data-select v-if="invoiceInfo.titleType === 0" style="margin-right: 20rpx;" class="left_input"
            :clear="false" v-model="invoiceInfo.invoiceType" :localdata="range"></uni-data-select>
          <uni-data-select v-else style="margin-right: 20rpx;" class="left_input" :clear="false"
            v-model="invoiceInfo.invoiceType" :localdata="range1"></uni-data-select>
        </view>
        <view style="margin-bottom: 40rpx" class="row_name">
          <view class="left_txt">抬头类型：</view>
          <radio-group class="uni-flex uni-row radio-group left_input" v-model="invoiceInfo.titleType"
            @change="titleTypeChange" style="flex-wrap: wrap">
            <radio :value="1" :checked="invoiceInfo.titleType === 1" class="radio r2">个人</radio>
            <radio :value="0" :checked="invoiceInfo.titleType === 0" class="radio r3" style="margin-top: 20rpx">单位
            </radio>
          </radio-group>
        </view>
        <view class="row_name">
          <view class="left_txt">发票抬头</view>
          <input class="left_input" placeholder="填写发票抬头" maxlength="40" v-model="invoiceInfo.invoiceTitle" />
        </view>
        <view class="line"></view>
        <view v-if="invoiceInfo.titleType === 0" class="row_name">
          <view class="left_txt">税号</view>
          <input class="left_input" placeholder="填写纳税人识别号" maxlength="40" v-model="invoiceInfo.taxNumber" />
        </view>
        <view v-if="invoiceInfo.titleType === 0" class="line"></view>
        <view v-if="invoiceInfo.titleType === 0" class="row_name">
          <view class="left_txt">联系地址</view>
          <input class="left_input" placeholder="选填" maxlength="40" v-model="invoiceInfo.address" />
        </view>
        <view v-if="invoiceInfo.titleType === 0" class="line"></view>
        <view v-if="invoiceInfo.titleType === 0" class="row_name">
          <view class="left_txt">联系电话</view>
          <input class="left_input" placeholder="选填" maxlength="20" v-model="invoiceInfo.telephone" />
        </view>
        <view v-if="invoiceInfo.titleType === 0" class="line"></view>
        <view v-if="invoiceInfo.titleType === 0" class="row_name">
          <view class="left_txt">开户行名称</view>
          <input class="left_input" placeholder="选填" maxlength="40" v-model="invoiceInfo.bankName" />
        </view>
        <view v-if="invoiceInfo.titleType === 0" class="line"></view>
        <view v-if="invoiceInfo.titleType === 0" class="row_name">
          <view class="left_txt">开户行账号</view>
          <input class="left_input" placeholder="选填" maxlength="40" v-model="invoiceInfo.bankAccount" />
        </view>
        <view class="line"></view>
        <view class="row_name">
          <view class="left_txt">默认</view>
          <view class="right_input">
            <switch :checked="invoiceInfo.isDefault" @change="switch2Change" />
          </view>
        </view>
      </view>
      <view class="button_2 btn" @tap="onSave">保存并使用</view>
      <view class="button_3 btn del" @tap="onDel">删除发票抬头</view>
    </view>
  </view>
</template>

<script>
import { invoice } from "../../services/index.js";
export default {
  data() {
    return {
      range: [
        { value: 0, text: "电子普票" },
        { value: 1, text: "电子专票" },
        { value: 2, text: "纸质普票" },
        { value: 3, text: "纸质专票" },
      ],
      range1: [
        { value: 0, text: "电子普票" },
        { value: 2, text: "纸质普票" },
      ],
      invoiceInfo: {
        invoiceType: 0,
        titleType: 1,
        invoiceTitle: '',
        taxNumber: '',
        bankName: '',
        bankAccount: '',
        telephone: '',
        address: '',
        isDefault: false
      },
      type: 0, //当前应该显示哪种面板 0-添加地址 1-区域选择
      actionLock: false,
    };
  },
  mounted() { },
  onLoad() { },
  methods: {
    switch2Change: function (e) {
      this.invoiceInfo.isDefault = e.detail.value
    },
    titleTypeChange(e) {
      this.invoiceInfo.titleType = Number(e.detail.value);
      this.invoiceInfo.invoiceType = 0;
    },
    onLoad(params) {
      if (params.invoiceId) {
        this.getInvoiceTitleList(params.invoiceId);
      }
    },
    async getInvoiceTitleList(invoiceId) {
      uni.showLoading();
      let res = await invoice.getInvoiceTitleList();
      if (res.code === 200) {
        let temp = res.data.find((e) => e.id === Number(invoiceId));
        this.invoiceInfo = temp;
      }
      uni.hideLoading();
    },
    onShow() { },
    //校验数据是否有效
    checkData(data) {
      let msg = "";
      let pattern = /^\d{1,40}$/;
      let taxPattern = /^[a-zA-Z0-9]{10,20}$/
      let telPattern = /^[\d-+]{1,40}$/;
      if (data.invoiceType === 1 || data.invoiceType === 3) {
        if (!data.bankAccount) {
          msg = '请输入开户行账号'
        }
        if(!pattern.test(data.bankAccount)){
          msg = '银行账户只能输入数字，请重新输入'
        }
        if (!data.bankName) {
          msg = '请输入开户行名称'
        }
        if (!data.telephone) {
          msg = '请输入联系电话'
        }
        if(!telPattern.test(data.telephone)){
          msg = '请输入正确的电话号码'
        }
        if (!data.address) {
          msg = '请输入联系地址'
        }
      }
      if (data.titleType === 0) {
        if (!data.taxNumber) {
          msg = '请输入税号'
        }
        if(!taxPattern.test(data.taxNumber)){
          msg = '单位税号10到20位数字字母组合，请检查'
        }
      }
      if (!data.invoiceTitle) {
        msg = '请输入发票抬头'
      }
      return msg;
    },
    //保存收货地址
    async onSave() {
      uni.showLoading();
      let data = this.invoiceInfo;
      let msg = this.checkData(data);
      if (msg) {
        uni.showToast({
          title: msg,
          icon: "none",
        });
        return false;
      }
      if (this.actionLock) {
        return false;
      }
      this.actionLock = true;
      let res = {};
      if (data.id) {
        res = await invoice.editInvoiceTitle(data);
      } else {
        res = await invoice.addInvoiceTitle(data);
      }
      if (res.code === 200) {
        uni.showToast({
          title: "编辑成功",
          icon: "none",
          success: function () {
            wx.navigateBack({
              //返回上一页
              delta: 1,
            });
          },
        });
      } else {
        uni.showToast({
          title: res.msg,
        });
      }
      this.actionLock = false;
      uni.hideLoading();
    },
    async onDel() {
      if (this.actionLock) {
        return false;
      }
      this.actionLock = true;
      uni.showLoading({
        title: "正在删除",
      });
      let res = await invoice.delInvoiceTitle(this.invoiceInfo.id);
      if (res.code === 200) {
        wx.navigateBack({
          //返回上一页
          delta: 1,
        });
      }
      this.actionLock = false;
      uni.hideLoading();
    },
  },
};
</script>

<style scoped>
.address-add-containter {
  position: relative;
  width: 100%;
  height: 100%;
}

.add-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  margin-top: 30rpx;
}

.row_name {
  margin-top: 20rpx;
}

.panel {
  background: #fff;
  width: 100%;
  margin-bottom: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.left_txt {
  text-align: left;
  width: 24%;
  margin-left: 7%;
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36rpx;
}

.left_input {
  width: 90%;
  font-size: 26rpx;
}

.row_name {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 70%;
  height: 90rpx;
  border-radius: 10rpx;
}

.del {
  margin-top: 20rpx;
}

.line {
  margin-top: 10rpx;
  width: 90%;
  height: 2rpx;
  background: rgba(245, 245, 245, 1);
}

.select-list-content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
}

.txt {
  height: 84rpx;
  font-size: 42rpx;
  border-bottom: 2rpx solid rgba(229, 229, 229, 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 50rpx;
}

.picker-view {
  width: 750rpx;
  height: 300rpx;
  margin-top: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.picker_container {
  text-align: center;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  padding-bottom: 60rpx;
  padding-top: 20rpx;
}

.picker_top {
  display: flex;
  justify-content: center;
  padding: 0 20rpx;
  margin-top: 50rpx;
}

.picker_cancel {
  color: #00b26a;
  background-color: #eee;
  width: 150rpx;
  text-align: center;
  border-radius: 10rpx;
  padding: 15rpx;
}

.picker_ok {
  color: #fff;
  background-color: #00b26a;
  width: 150rpx;
  text-align: center;
  border-radius: 10rpx;
  margin-left: 40rpx;
  padding: 15rpx;
}

.popup-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: rgba(1, 1, 1, 0.3);
}

.right_input {
  width: 90%;
}
</style>
